import React, { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom'

import './sideMenu.css'
//引入其他菜单选项
//引入全部页面路由
import { Layout, Menu } from 'antd';
import homeRouter from '../../router/homeRouter';

import contractRouter from '../../router/contractRouter';
import afterSaleRouter from '../../router/afterSaleRouter';
import customerRouter from '../../router/customerRouter';
import customerHighSeasRouter from '../../router/customerHighSeasRouter';
import documentaryRouter from '../../router/documentaryRouter';
import employeeRouter from '../../router/employeeRouter';
import financeRouter from '../../router/financeRouter';
import goodsRouter from '../../router/goodsRouter';
import noticeRouter from '../../router/noticeRouter';
import orderRouter from '../../router/orderRouter';
import recycleBinRouter from '../../router/recycleBinRouter';
import workOrderRouter from '../../router/workOrderRouter';
import otherRouter from '../../router/otherRouter';
import addressListRouter from '../../router/addressListRouter';
import announcementRouter from '../../router/announcementRouter';
const { SubMenu } = Menu;
const { Sider } = Layout;
// const customerManage=[
//     {
//       path: '/customerManage',
//       title: '客户管理',
//       children: [
//         {
//           path: '/customerManage/customerList',
//           title: '客户列表',
         
//         }, {
//           path: '/customerManage/collideBill',
//           title: '撞单查询',
          
//         },
//         {
//           path: '/customerManage/add',
//           title: '新增客户',
          
//         },
  
//       ]
//     },
//   ]
const Sidemenu = (props) => {
    const routerMap = [
        ...homeRouter,
        ...contractRouter,
        ...afterSaleRouter,
        ...customerRouter,
        ...customerHighSeasRouter,
        ...documentaryRouter,
        ...employeeRouter,
        ...financeRouter,
        ...goodsRouter,
        ...noticeRouter,
        ...orderRouter,
        ...recycleBinRouter,
        ...workOrderRouter,
        ...otherRouter,
        ...addressListRouter,
        ...announcementRouter,
       
    ]
    const checkPagePermission = (item)=>{
        return !item.pagepermisson
      }
    const [menuList, setmenuList] = useState([]);
    const navigate = useNavigate();
    const location = useLocation()
    const renderMenu = (menuList) => {//递归调用
        return menuList.map(item => {
            if (item.children?.length > 0 && item.path !== '/') {
                if (!item.onlyOne) {//判断是否就显示一个父路由
                    return <SubMenu key={item.path} title={item.title}
                    >
                        {renderMenu(item.children)}
                    </SubMenu>

                }else{
                    return item.pagePermission!==1 && item.path !== '/' && <Menu.Item key={item.path} onClick={() => {
                        navigate(item.path)
    
                    }}>{item.title}</Menu.Item>
                }
                
            }
            else {
                return checkPagePermission(item) && item.pagePermission!==1 && item.path !== '/' && <Menu.Item key={item.path} onClick={() => {
                    navigate(item.path)
                }}>{item.title}</Menu.Item>
            }

        })
    }
    useEffect(() => {
        //模拟请求
        setmenuList(routerMap)

    }, []);
    let secondKey = [location.pathname]
    let firstkey = ['/' + location.pathname.split('/')[1]]
    return (
        <Sider trigger={null} collapsible collapsed={false} style={{ height: '100vh' }}>
            <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
                <div className="logo" >星材ERP管理系统</div>
                <div style={{ flex: '1', overflow: 'auto' }}>
                    <Menu theme="dark" mode="inline" selectedKeys={secondKey} defaultOpenKeys={firstkey}>
                        {
                            renderMenu(menuList)
                        }
                    </Menu>
                </div>
            </div>
        </Sider>

    );
}

export default Sidemenu;
